<!--suppress ALL -->
<template>
    <div class="card rdsp-card-view" data-page="troubleRank">
        <div class="card-content rank-content card-content-padding todayInspect-card-content">
            <div class="rdsp-card-title">
                <div class="left-title">本期巡检</div>
                <div class="rdsp-card-title-right">
                  <div class="right-con" id="todayInspect-right-tital"></div>
                </div>
            </div>
            <div class="rdsp-card-con ">
                <div @click="showRistList(0)" class="todayInspect-charts" id="todayInspect-pie-unfinish">
                    
                </div>
                <div @click="showRistList(1)" class="todayInspect-cotent" id="todayInspect-pie-finish">
                    
                </div> 
                <div @click="showRistList(0)" class="todayInspect-unfinish-unit">未完成单位<span id="todayInspect-unfinish-num">0</span></div>
                
                
                <div @click="showRistList(1)" class="todayInspect-finish-unit">已完成单位<span id="todayInspect-finish-num">0</span></div>
                
            </div>
            
        </div>
    </div>
</template>

<style scoped>
    .todayInspect-card-content{
        height: 168px;
    }
    .todayInspect-card-content>.rdsp-card-con{
    }
    .todayInspect-charts{
        height: 110px;
        position: relative;
        width: 50%;
        display:inline-block;
    }
    .todayInspect-cotent{
        float: right; 
        width: 50%;
        height: 110px;
    }
    .todayInspect-unfinish-unit{
        position: relative;
        width: 50%;
        font-size: 12px;
        color: #999999;
        text-align: center;
    }
    .todayInspect-unfinish-unit>span{
        margin-left: 5px;
        color: #378bf6;
    }
    .todayInspect-finish-unit{
        float: right; 
        width: 50%;
        margin-top: -17px;
        font-size: 12px;
        text-align: center;
        color: #999999;
    }
    .todayInspect-finish-unit>span{
        margin-left: 5px;
        color: #77be07;
    }
</style>

<script>
    return {
        beforeCreate() {
          $("#todayInspect-pie-unfinish").empty();
          $("#todayInspect-pie-finish").empty();
        },
        data: function () {
            return {
            }
        },
        methods: {
            showRistList:function(type){
              app.router.navigate("/newUnitInspectInfo/"+type+"/");
            },
            getTodayInspectCountInfo:function(){
              var self = this;
              var id_org = "";
              if (single_Orgid == "") {
                id_org = userInfor.organizationIds;
              } else {
                id_org = single_Orgid;
              }
              Dao.getNewTodayInspectCount({
                userName:userInfor.accountName,
                deviceId:appKeyObj.deviceId,
                orgIds:userInfor.organizationIds
              },function(data){
                $("#todayInspect-unfinish-num").html(data.unfinishNum?data.unfinishNum:0);
                $("#todayInspect-finish-num").html(data.finishOrgNum?data.finishOrgNum:0);
                  self.drawPieChart(data);
              });
            },
            drawPieChart:function(data){
              var arr=[];
              var arr1=[];
              arr.push({
                name : '完成',
                value:data.finishOrgNum
              });
              arr.push({
                name : '未完成',
                value:data.unfinishNum
              });
              arr1.push({
                name : '未完成',
                value:data.unfinishNum
              });
              arr1.push({
                name : '完成',
                value:data.finishOrgNum
              });
              var arr1NullFlag = true;
              var arr1Color = ['#378bf6','#f4f4f4'];
              jQuery.each(arr1,function(i,v){
                if(0 != v.value){
                  arr1NullFlag = false;
                }
              });
              if(arr1NullFlag){
                arr1.pop();
                arr1Color = ['#f4f4f4','#f4f4f4'];
              }
              var arrNullFlag = true;
              var arrColor = ['#378bf6','#f4f4f4'];
              jQuery.each(arr,function(i,v){
                if(0 != v.value){
                  arrNullFlag = false;
                }
              });
              if(arrNullFlag){
                arr.pop();
                arrColor = ['#f4f4f4','#f4f4f4'];
              }
              var carChart = echarts.init(document.getElementById('todayInspect-pie-unfinish'));
              var _zr = carChart.getZr();
              _zr.add(new echarts.graphic.Text({
               style: {            
                 x: _zr.getWidth() / 2,
                 y: _zr.getHeight() / 2-6,
                 color: '#666666', 
                 text: data.unfinishPercent + '%',
                 textAlign: 'center', 
                 textFont : 'bold 14px verdana'
                 }}  
              ));
              carChart.setOption({
                tooltip : {
                  trigger: 'item',
                  show:false,
                  formatter: "{a} <br/>{b} : {c} ({d}%)",
                  position:['50%', '50%']
                },
                series : [
                {
                  name: '巡检完成率',
                  type: 'pie',
                  clickable:false,
                  hoverAnimation:false,
                  radius : [40, 50],
                  center: ['50%', '50%'],
                  data:arr1,
                  label: {
                    normal: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      show: false,
                      textStyle: {
                        fontSize: '14',
                        fontWeight: 'bold'
                      }
                    }
                  },
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                }
                ],
                color: arr1Color
              });
              var finishChart = echarts.init(document.getElementById('todayInspect-pie-finish'));
              var _zr = finishChart.getZr();
              _zr.add(new echarts.graphic.Text({
               style: {            
                 x: _zr.getWidth() / 2,
                 y: _zr.getHeight() / 2-6,
                 color: '#666666', 
                 text: data.finishPercent + '%',
                 textAlign: 'center', 
                 textFont : 'bold 14px verdana'
                 }}  
              ));
              finishChart.setOption({
                tooltip : {
                  trigger: 'item',
                  show:false,
                  formatter: "{a} <br/>{b} : {c} ({d}%)",
                  position:['50%', '50%']
                },
                series : [
                {
                  name: '巡检完成率',
                  type: 'pie',
                  clickable:false,
                  hoverAnimation:false,
                  radius : [40, 50],
                  center: ['50%', '50%'],
                  data:arr,
                  label: {
                    normal: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      show: false,
                      textStyle: {
                        fontSize: '14',
                        fontWeight: 'bold'
                      }
                    }
                  },
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                }
                ],
                color: arrColor
              });
          }
        },
        on: {
            pageInit: function(e, page) {
            },
            pageAfterIn: function(e, page) {
              var self = this;
              self.getTodayInspectCountInfo();
            },
      }
    }
</script>
